﻿svg {
/* may need a block positioning here */
/*position:block;*/
width:600px;  
height:200px;
top: 80px;  
  }

hr { 
  display: block;
  margin-top: 0;
  margin-bottom: 0em;
  border-style: inset;
  border-width: 1px;
}  
  
#popupbox {
width: 100px;
padding: 2px;
position: absolute; 
display: none;
background-color:rgba(238, 238, 238, 0.9);
color: #000000;
border: 1px solid #1a1a1a;
font-size: 70%;
font-family: Arial, Helvetica, sans-serif;
box-shadow: 1px 1px 1px 1px #888888;
font-weight: bold;
z-index: 1; 
}
	
img[id$="_es"],
img[id$="_bal"],
img[id$="_wmd"],
img[id$="_dc"],

img[id$="_es1"],
img[id$="_bal1"],
img[id$="_wmd1"],
img[id$="_dc1"] {
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
height: 120px;  
}

img[id$="_AQI"] {
	position: absolute; 
	left: 5px; 
	top: 55px; 
	height: 65px;
	z-index: 0; 
}

#bal.arrow_box{
  left:160px; 
  top:10px;
  /*height:45px;    */
}

#es.arrow_box{
  left: 205px; 
  top: 90px;
  /*height: 45px;   */
}

#dc.arrow_box{
  left: 90px; 
  top: 80px;
  /*height: 45px;   */
}

#wmd.arrow_box{
  left: 0px; 
  top: 10px;
  /*height: 45px;   */
}


.arrow_box {
  position: absolute;
  background-color:rgba(238, 238, 238, 0.9);
  border: 1px solid #1a1a1a; 
  top: 250px; 
  padding: 2px;
  font-family: Arial, Helvetica, sans-serif;
  box-shadow: 1px 1px 1px 1px #888888;
  font-size: 70%;
  text-align: center;
}

.arrow_box table {
  font-weight: bold;
  font-size: 100%;
  font-family: Arial, Helvetica, sans-serif;
  width: 100px;
  border: 0; 
}

.arrow_box td {
  text-align: center;
  width: 30px; 
}
  
.arrow_box:after, .arrow_box:before {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
}

.arrow_box:after {
	border-color: rgba(238, 238, 238, 0);
	border-bottom-color: #eeeeee;
	border-width: 5px;
	margin-left: -5px;
}
.arrow_box:before {
	border-color: rgba(26, 26, 26, 0);
	border-bottom-color: #1a1a1a;
	border-width: 6px;
	margin-left: -6px;
}

/* Style the tab */
.tab {
  overflow: hidden;
  /* border: 0px solid #ccc; 
  background-color: #eeeeee;
  width: 300px; */
  
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  transition: 0.3s;
  font-size: 15px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #dddddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #A4D4FF;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 5px 5px;
  border-top: none;
  width: 300px;
  height: 125px; 
  border-style: solid; 
  border-width: 1px; 
}


.borders_svg {
  transition: stroke-width 0.2s ease-in;
  stroke: black;
  stroke-width: 3;
  stroke-opacity: 1;
  fill-opacity: 1;
}
  
.borders_svg:hover {
  stroke-width: 4;
  transition: stroke-width 0.2s ease-out;
}

.borders_county_svg {
  opacity: 1;
  stroke: #000000;
  stroke-width: 0.50;
}

.borders_county_svg:hover {
  stroke-width: 2;
  transition: stroke-width 0.2s ease-out;
}

.mapdiv{
/* border-style: solid; */
/* border-width: 1px; */
position: relative;
left: 8px;  
width: 300px;  
height: 140px; 
}

.svg_fill_green { fill: #33CC33; }
.svg_fill_yellow { fill: #FFFF00; }
.svg_fill_orange { fill: #FF7E00; }
.svg_fill_red { fill: #F80000; }
.svg_fill_darkpink { fill: #9A1C50; }
.svg_fill_verydarkpink { fill: #72174E; }

.mainDiv {
  width: 310px;
  border-style: solid; 
  border-width: 1px; 
  background-color:#f0f8ff;
  padding: 5px;
}

.headerBanner {
    text-align: center;
}

.forecastBox {
   float: left;
   width: 25px;
   padding-left: 1px;
   margin-left: 2px;
}

.forcastLocationHeader {
  font-weight: bold;
}

/*********** Styles for Discussion section **************/

.discussionMainDiv {

}

.showmore {
  width:300px;
  overflow:hidden;
  height:120px;
  margin-bottom:7px;
}

.showall {
  width:300px;
  overflow:auto;
}

.discussionHeader {

}

.discussionHREF {
    text-decoration: none;
    font-weight: bold;
}

.finePrint {
  font-size: 10px;
  padding-left: 5px;
}